{"componentChunkName":"component---src-templates-post-jsx","path":"/프로그래머스 데브매칭 고양이 정리/","result":{"data":{"site":{"siteMetadata":{"title":"jigglog","author":"JIGGLYPOP","homepage":"http://jigglog.s3-website.ap-northeast-2.amazonaws.com"}},"post":{"id":"651f31f7-94dc-5396-b255-ac68deb7a258","html":"1. App
\nimport SearchInput from \"./components/SearchInput.js\";\nimport SearchResult from \"./components/SearchResult.js\";\nimport ImageInfo from \"./components/ImageInfo.js\";\nimport Spinner from \"./components/Spinner.js\";\nimport Tags from \"./components/Tags.js\";\nimport DarkButton from \"./components/DarkButton.js\";\nimport Banner from \"./components/Banner.js\";\nimport throttling from \"./utils/throttle.js\";\nimport spinnerToggle from \"./utils/spinnerToggle.js\";\n\nimport api from \"./api/api.js\";\n\nexport default class App {\n $target = null;\n data = [];\n tags = [];\n\n constructor($target) {\n this.$target = $target;\n // 스피너\n this.spinner = new Spinner({\n $target,\n });\n\n // 검색\n this.searchInput = new SearchInput({\n $target,\n onSearch: async (keyword) => {\n spinnerToggle();\n this.tags.setTags(keyword);\n const res = await api.fetchCats(keyword);\n if (!res.isError) {\n this.setSearchData(res.data);\n } else {\n this.setError(res.data);\n }\n spinnerToggle();\n },\n\n onRandom: async () => {\n spinnerToggle();\n const res = await api.fetchRandoms();\n if (!res.isError) {\n this.setState(res.data);\n } else {\n this.setError(res.data);\n }\n spinnerToggle();\n },\n });\n // 다크모드\n this.darkbutton = new DarkButton({\n $target,\n });\n // 태그\n this.tags = new Tags({\n $target,\n onClickTag: async (keyword) => {\n spinnerToggle();\n const res = await api.fetchCats(keyword);\n if (!res.isError) {\n this.setSearchData(res.data);\n } else {\n this.setError(res.data);\n }\n spinnerToggle();\n },\n });\n // 배너\n this.banner = new Banner({\n $target,\n onRandom: async () => {\n spinnerToggle();\n const res = await api.fetchRandoms();\n if (!res.isError) {\n this.setState(res.data);\n } else {\n this.setError(res.data);\n }\n spinnerToggle();\n },\n });\n // 결과리스트\n const throttle = throttling();\n const scroll = () => {\n const {\n scrollTop,\n scrollHeight,\n clientHeight,\n } = document.documentElement;\n if (scrollTop + clientHeight >= scrollHeight - 500) {\n throttle.throttle(async () => {\n spinnerToggle();\n this.setDummy();\n const res = await api.fetchRandoms();\n if (!res.isError) {\n this.setScroll(res.data);\n } else {\n this.setError(res.data);\n }\n this.setDummy();\n spinnerToggle();\n });\n }\n };\n\n this.searchResult = new SearchResult({\n $target,\n initialData: this.data,\n onClick: (data) => {\n this.imageInfo.setState({\n visible: true,\n data,\n });\n },\n onScroll: async (isRandom) => {\n if (isRandom) {\n window.addEventListener(\"scroll\", scroll);\n } else {\n window.removeEventListener(\"scroll\", scroll);\n }\n },\n });\n // 모달\n this.imageInfo = new ImageInfo({\n $target,\n data: {\n visible: false,\n image: null,\n },\n });\n }\n\n setState(nextData) {\n this.data = nextData;\n this.banner.setState(nextData);\n this.searchResult.setState(nextData);\n }\n\n setSearchData(data) {\n this.banner.setState(data);\n this.searchResult.setSearchData(data);\n }\n\n setScroll(data) {\n this.data.push(...data);\n this.banner.setState(this.data);\n this.searchResult.setState(this.data);\n }\n\n setDummy() {\n this.searchResult.dummyToggle();\n }\n\n setError(errorData) {\n this.searchResult.setError(errorData);\n }\n}
2. style.css
\n@font-face {\n font-family: \"Goyang\";\n src: url(\"fonts/Goyang.woff\") format(\"woff\");\n font-weight: normal;\n font-style: normal;\n}\n\nhtml {\n box-sizing: border-box;\n}\n\nbody * {\n font-family: Goyang;\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\n#App {\n margin: 1.5em auto;\n max-width: 1200px;\n column-gap: 1.5em;\n}\n\n.SearchResult {\n margin-top: 10px;\n display: grid;\n grid-template-columns: repeat(4, minmax(250px, 1fr));\n grid-gap: 10px;\n}\n\n@media only screen and (max-width: 992px) {\n .SearchResult {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media only screen and (max-width: 768px) {\n .SearchResult {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media only screen and (max-width: 576px) {\n .SearchResult {\n grid-template-columns: 1fr;\n }\n}\n\n.SearchResult img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.SearchResult .img-outer {\n width: 100%;\n height: 300px;\n}\n\n.SearchResult .item {\n background-color: #eee;\n display: inline-block;\n margin: 0 0 1em;\n width: 100%;\n}\n\n.SearchInput {\n width: 100%;\n font-size: 40px;\n padding: 10px 15px;\n}\n\n.ImageInfo {\n position: fixed;\n z-index: -1;\n opacity: 0;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.5);\n transition: opacity 0.3s;\n}\n.tooltip {\n z-index: -1;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.fade-in {\n z-index: 1;\n opacity: 1;\n}\n\n.fade-out {\n z-index: -1;\n opacity: 0;\n}\n\n.ImageInfo .title {\n display: flex;\n justify-content: space-between;\n}\n\n.ImageInfo .title,\n.ImageInfo .description {\n padding: 5px;\n}\n\n.ImageInfo .content-wrapper {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n border: 1px solid #eee;\n border-radius: 5px;\n}\n\n.ImageInfo .content-wrapper img {\n width: 100%;\n}\n\n.spinner-wrapper {\n position: fixed;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n color: white;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.5);\n}\n\n#dummy {\n width: 100vw;\n height: 1000px;\n}\n\n.isvisible {\n display: none;\n}\n\n.imgs-container img {\n width: 100px;\n height: 100px;\n}\n\n.imgs-container.banner-outer {\n width: 100px;\n height: 100px;\n}\n\n/* 캐러셀 */\n.imgs-container {\n display: flex;\n transform: translate3d(0);\n transition: transform 0.5s ease-in-out;\n}\n\n.carousel {\n width: 500px;\n overflow: hidden;\n}\n\n/* dark mode 처리 */\n\n@media (prefers-color-scheme: dark) {\n body {\n transition: all 0.5s ease-in-out;\n background-color: #000;\n color: #fff;\n }\n}\n\nbody[data-theme=\"light\"] {\n transition: all 0.5s ease-in-out;\n background-color: #fff;\n color: #000;\n}\n\nbody[data-theme=\"dark\"] {\n transition: all 0.5s ease-in-out;\n background-color: #000;\n color: #fff;\n}
3. cache
\nconst cache = {\n get(key) {\n const data = JSON.parse(localStorage.getItem(key));\n return data;\n },\n set(key, data) {\n localStorage.setItem(key, JSON.stringify(data));\n },\n};\n\nexport default cache;
4. debounce
\nconst debouncing = () => {\n let timer;\n return {\n debounce(callback) {\n if (!timer) clearTimeout(timer);\n timer = setTimeout(() => {\n callback(...arguments);\n }, 500);\n },\n };\n};\n\nexport default debouncing;
5. spinnerToggle
\nconst spinnerToggle = () => {\n const spinner = document.querySelector(\".spinner-wrapper\");\n spinner.classList.toggle(\"isvisible\");\n};\nexport default spinnerToggle;
6. throttle
\nconst throttling = () => {\n let timer;\n return {\n throttle(callback) {\n if (!timer) {\n timer = setTimeout(() => {\n callback(...arguments);\n timer = false;\n }, 500);\n }\n },\n };\n};\n\nexport default throttling;
7. banner
\nexport default class Banner {\n data = [];\n onRandom = null;\n\n constructor({ $target, onRandom }) {\n const $outer = document.createElement(\"div\");\n $outer.className = \"carousel\";\n this.$outer = $outer;\n this.onRandom = onRandom;\n $target.appendChild(this.$outer);\n this.onRandom();\n }\n\n setState(nextData) {\n this.data = nextData;\n this.render();\n }\n\n render() {\n this.$outer.innerHTML = \"\";\n const imgsContainer = document.createElement(\"div\");\n imgsContainer.className = \"imgs-container\";\n imgsContainer.innerHTML = this.data\n .map(\n (img) => `\n <div class=\"banner-outer\">\n <img src=\"${img.url}\" class=\"banner-img\"/>\n </div>\n `\n )\n .join(\"\");\n\n // 넘기기\n const imgs = imgsContainer.getElementsByTagName(\"img\");\n let idx = 0;\n const changeImg = () => {\n if (idx > imgs.length - 5) {\n idx = 0;\n } else if (idx < 0) {\n idx = imgs.length - 5;\n }\n imgsContainer.style.transform = `translateX(${-idx * 100}px)`;\n };\n\n const leftBtn = document.createElement(\"button\");\n leftBtn.className = \"left-btn\";\n leftBtn.innerText = \"이전\";\n leftBtn.addEventListener(\"click\", () => {\n idx--;\n changeImg();\n });\n\n const rightBtn = document.createElement(\"button\");\n rightBtn.className = \"right-btn\";\n rightBtn.innerText = \"다음\";\n rightBtn.addEventListener(\"click\", () => {\n idx++;\n changeImg();\n });\n this.$outer.appendChild(imgsContainer);\n this.$outer.appendChild(leftBtn);\n this.$outer.appendChild(rightBtn);\n }\n}
export default class DarkButton {\n constructor({ $target }) {\n const $outer = document.createElement(\"div\");\n $outer.className = \"darkmode\";\n this.$outer = $outer;\n $target.appendChild(this.$outer);\n this.render();\n }\n\n render() {\n let originTheme = document.body.dataset.theme;\n if (!originTheme) {\n originTheme = window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n document.body.setAttribute(\"data-theme\", originTheme);\n }\n\n const btn = document.createElement(\"button\");\n btn.id = \"darkmode-btn\";\n btn.innerText = \"다크모드\";\n btn.addEventListener(\"click\", () => {\n if (originTheme === \"dark\") {\n originTheme = \"light\";\n document.body.setAttribute(\"data-theme\", \"light\");\n } else {\n originTheme = \"dark\";\n document.body.setAttribute(\"data-theme\", \"dark\");\n }\n });\n this.$outer.appendChild(btn);\n }\n}
9. imageinfo
\nimport api from \"../api/api.js\";\nimport spinnerToggle from \"../utils/spinnerToggle.js\";\n\nexport default class ImageInfo {\n $imageInfo = null;\n data = null;\n catdata = null;\n caterror = null;\n\n constructor({ $target, data }) {\n const $imageInfo = document.createElement(\"div\");\n $imageInfo.className = \"ImageInfo\";\n $imageInfo.id = \"image-info\";\n this.$imageInfo = $imageInfo;\n\n $target.appendChild($imageInfo);\n this.data = data;\n this.render();\n }\n\n async onCatById(id) {\n const res = await api.fetchCatById(id);\n if (!res.isError) {\n this.catdata = res.data;\n } else {\n this.caterror = res.data;\n }\n }\n\n async setState(data) {\n spinnerToggle();\n this.data = data;\n await this.onCatById(this.data.data);\n spinnerToggle();\n this.render();\n }\n\n onClose() {\n this.data.visible = false;\n this.fadeOut();\n this.render();\n }\n\n fadeIn() {\n this.$imageInfo.classList.add(\"fade-in\");\n this.$imageInfo.classList.remove(\"fade-out\");\n }\n\n fadeOut() {\n this.$imageInfo.classList.add(\"fade-out\");\n this.$imageInfo.classList.remove(\"fade-in\");\n }\n\n render() {\n if (this.data.visible) {\n this.fadeIn();\n this.$imageInfo.innerHTML = `\n <div class=\"content-wrapper\">\n <div class=\"title\">\n <span>${this.catdata.name}</span>\n <div class=\"close\">x</div>\n </div>\n <img src=\"${this.catdata.url}\" alt=\"${this.catdata.name}\"/> \n <div class=\"description\">\n <div>성격: ${this.catdata.temperament}</div>\n <div>태생: ${this.catdata.origin}</div>\n </div>\n </div>`;\n\n this.$imageInfo.addEventListener(\"click\", (e) => {\n if (e.target.id === \"image-info\" || e.target.className === \"close\") {\n this.onClose();\n }\n });\n window.addEventListener(\"keyup\", (e) => {\n if (this.data.visible && e.key === \"Escape\") {\n this.onClose();\n }\n });\n } else {\n this.fadeOut();\n }\n }\n}
export default class SearchInput {\n constructor({ $target, onSearch, onRandom }) {\n const $searchInput = document.createElement(\"section\");\n this.$searchInput = $searchInput;\n this.onRandom = onRandom;\n this.onSearch = onSearch;\n $target.appendChild($searchInput);\n this.render();\n }\n\n render() {\n this.$searchInput.innerHTML = `\n <div class=\"search-wrapper\">\n <span>\n <button class=\"random-button\">고양이</button>\n </span>\n <input class=\"SearchInput\" placeholder=\"고양이를 검색해보세요.|\" />\n </div>`;\n const searchinput = document.querySelector(\".SearchInput\");\n searchinput.focus();\n this.$searchInput.addEventListener(\"keyup\", (e) => {\n if (e.target.value !== \"\") {\n if (e.keyCode === 13) {\n this.onSearch(e.target.value);\n e.target.value = \"\";\n }\n }\n });\n\n const randombutton = document.querySelector(\".random-button\");\n randombutton.addEventListener(\"click\", () => {\n this.onRandom();\n });\n }\n}
11. searchresult
\nexport default class SearchResult {\n $searchResult = null;\n $dummy = null;\n data = null;\n isRandom = true;\n error = null;\n onClick = null;\n onScroll = null;\n\n constructor({ $target, initialData, onClick, onScroll }) {\n this.$searchResult = document.createElement(\"div\");\n this.$searchResult.className = \"SearchResult\";\n\n this.$searchResult.addEventListener(\"click\", (e) => {\n this.onClick(e.target.id);\n });\n\n this.$dummy = document.createElement(\"div\");\n this.$dummy.classList.add(\"isvisible\");\n this.$dummy.id = \"dummy\";\n $target.appendChild(this.$searchResult);\n $target.appendChild(this.$dummy);\n\n this.data = initialData;\n this.onClick = onClick;\n this.onScroll = onScroll;\n this.render();\n }\n\n setState(nextData) {\n this.isRandom = true;\n this.data = nextData;\n this.error = null;\n this.render();\n }\n\n setError(errorData) {\n this.data = null;\n this.error = errorData.message;\n this.render();\n }\n\n setSearchData(nextData) {\n this.isRandom = false;\n this.data = nextData;\n this.error = null;\n this.render();\n }\n\n dummyToggle() {\n const dummy = document.querySelector(\"#dummy\");\n dummy.classList.toggle(\"isvisible\");\n }\n\n render() {\n if (this.data) {\n this.onScroll(this.isRandom);\n if (!this.isRandom && this.data.length === 0) {\n this.$searchResult.innerHTML = `<h1>검색 결과가 없습니다</h1>`;\n return;\n } else {\n if (\"IntersectionObserver\" in window) {\n const lazyimage = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n const outer = entry.target;\n const img = outer.querySelector(\"img\");\n const src = img.getAttribute(\"lazy\");\n img.setAttribute(\"src\", src);\n lazyimage.unobserve(outer);\n }\n });\n });\n\n const makeCat = (cat) => {\n const text = `\n <div class=\"item\">\n <div class=\"img-outer\">\n <img lazy=${cat.url} alt=${cat.name} id=${cat.id} />\n </div>\n <h6 class=\"tooltip\">${cat.name}</h6>\n </div>\n `;\n return text;\n };\n\n this.$searchResult.innerHTML = this.data\n .map((cat) => makeCat(cat))\n .join(\"\");\n\n this.$searchResult.querySelectorAll(\".item\").forEach(($item) => {\n const tooltip = $item.querySelector(\".tooltip\");\n\n $item.addEventListener(\"mouseover\", () => {\n tooltip.classList.add(\"fade-in\");\n tooltip.classList.remove(\"fade-out\");\n });\n $item.addEventListener(\"mouseout\", () => {\n tooltip.classList.add(\"fade-out\");\n tooltip.classList.remove(\"fade-in\");\n });\n lazyimage.observe($item);\n });\n }\n }\n } else if (this.error) {\n this.$searchResult.innerHTML = `\n <h1>${this.error}</h1>\n `;\n }\n }\n}
12. spinner
\nexport default class Spinner {\n $spinner = null;\n\n constructor({ $target }) {\n this.$spinner = document.createElement(\"div\");\n this.$spinner.className = \"spinner-wrapper\";\n $target.appendChild(this.$spinner);\n this.render();\n }\n render() {\n this.$spinner.classList.add(\"isvisible\");\n this.$spinner.innerHTML = `\n <span>\n <h1>잠시만 기다려주세요</h1>\n </span>`;\n }\n}
export default class Tags {\n tags = [];\n onClickTag = null;\n\n constructor({ $target, onClickTag }) {\n const $outer = document.createElement(\"div\");\n $outer.className = \"tags\";\n this.$outer = $outer;\n this.onClickTag = onClickTag;\n $target.appendChild(this.$outer);\n this.render();\n }\n\n setTags(tag) {\n if (this.tags.indexOf(tag) === -1) {\n if (this.tags.length >= 5) {\n this.tags.shift();\n }\n this.tags.push(tag);\n }\n this.render();\n }\n\n render() {\n this.$outer.innerHTML = \"\";\n this.tags.forEach((keyword) => {\n const tag = document.createElement(\"div\");\n tag.className = \"tag-item\";\n tag.innerHTML = `<h4>${keyword}</h4>`;\n tag.addEventListener(\"click\", () => {\n this.onClickTag(keyword);\n });\n this.$outer.appendChild(tag);\n });\n }\n}
14. api
\nimport cache from \"../utils/cache.js\";\n\nconst API_ENDPOINT =\n \"https://oivhcpn8r9.execute-api.ap-northeast-2.amazonaws.com/dev\";\n\nconst errorMsg = (res) => {\n if (res.status < 300) return false;\n if (res.status < 400) {\n return `리다이렉트 에러: ${res.status}`;\n }\n if (res.status < 500) {\n return `클라이언트 에러: ${res.status}`;\n }\n if (res.status < 600) {\n return `서버 에러: ${res.status}`;\n }\n};\n\nconst api = {\n fetchCats: async (keyword) => {\n try {\n const cachedata = cache.get(keyword);\n if (cachedata) {\n return {\n isError: false,\n data: cachedata,\n };\n }\n const res = await fetch(`${API_ENDPOINT}/api/cats/search?q=${keyword}`);\n if (res.ok) {\n const data = await res.json();\n cache.set(keyword, data.data);\n return {\n isError: false,\n data: data.data,\n };\n } else {\n const error = errorMsg(res);\n throw error;\n }\n } catch (e) {\n return {\n isError: true,\n data: e,\n };\n }\n },\n\n fetchRandoms: async () => {\n try {\n const res = await fetch(`${API_ENDPOINT}/api/cats/random50`);\n if (res.ok) {\n const data = await res.json();\n return {\n isError: false,\n data: data.data,\n };\n } else {\n const error = errorMsg(res);\n throw error;\n }\n } catch (e) {\n return {\n isError: true,\n data: {\n message: e.message,\n status: e.status,\n },\n };\n }\n },\n\n fetchCatById: async (id) => {\n try {\n const res = await fetch(`${API_ENDPOINT}/api/cats/${id}`);\n if (res.ok) {\n const data = await res.json();\n return {\n isError: false,\n data: data.data,\n };\n } else {\n const error = errorMsg(res);\n throw error;\n }\n } catch (e) {\n return {\n isError: true,\n data: {\n message: e.message,\n status: e.status,\n },\n };\n }\n },\n};\nexport default api;